<template>
    <div>
        <div class="zoushitu-tabs-area">
            <div class="zoushitu-icon-title">
                <img
                    src="../../assets/imgs/chartspage-zoushitu-icon.png"
                    class="zoushitu-icon"
                    alt=""
                >
                <span class="zoushitu-title">彩种走势图</span>
            </div>
            <div class="zoushitu-tabs my_text_center">
                <span
                    :class="{active:item.status}"
                    v-for="(item,a) in zoushituDataVar"
                    @click="changeZouShiTuTabsFuc(a,item.star)"
                >{{item.title}}</span>
            </div>
        </div>
        <!-- 多选框和表格区域 -->
        <div class="zoushifenxi-table-area">
            <div class="zoushifenxi-table-checkbox-query">
                <div class="title-left-icon-title">
                    <img
                        class="zoushifenxi-icon"
                        src="../../assets/imgs/chartspage-wuxingzoushi-icon.png"
                        alt=""
                    >
                    <span class="zoushifenxi-text">{{tabName}}走势分析</span>
                    <div class="checkbox-group">
                        <div
                            class="checkbox-item"
                            v-for="(item,index) in checkboxGroupVar"
                            @change="clickCheckbox(index)"
                        >
                            <input
                                type="checkbox"
                                :id="index"
                                class="input-checkbox"
                                v-model="item.status"
                            >
                            <label :for="index" class="checkbox-label">{{item.title}}</label>
                        </div>
                    </div>
                </div>
                <div class="title-right">
                    <span class="query-area-input-outbox">
                        统计
                        <input
                            v-model="queryNum"
                            type="text"
                            placeholder="30"
                            class="query-area-input my_text_center"
                        >&nbsp;期
                    </span>
                    <button class="query-area-btn" @click="llQueryData">查询</button>
                </div>
            </div>
            <div class="zoushifenxi-table-box">
                <table style="fontFamily:SimSun" class="bj-table" ref="table">
                    <thead>
                        <tr class="thead-one-row">
                            <td rowspan="2" class="one-row-one-td" width="100">期号</td>
                            <td rowspan="2" class="one-row-tow-td" width="200">开奖号码</td>
                            <td v-for="elem in theadOneRowOtherTdData" width="300">{{elem}}</td>
                        </tr>
                        <tr class="thead-two-row">
                            <td class="two-row-outer-td" v-for="(ele,i) in theadTwoRowData">
                                <tbody>
                                    <tr>
                                        <td v-for="e in ele" width="30">
                                            <span>{{e}}</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr
                            :class="{fuzhuxian:isFuZhuXianChecked}"
                            v-for="(item,index) in tbodyData"
                            class="tbody-out-tr"
                        >
                            <td class="tbody-tr-outer-td">{{item.expect}}</td>
                            <td class="tbody-tr-outer-td luckNum-bj-col">{{item.award_number}}</td>
                            <td
                                class="tbody-tr-outer-td td-center-five-col"
                                v-for="(el,i) in item.data"
                                :class="getClassNameFuc(i,item.data.length)"
                            >
                                <tbody>
                                    <tr>
                                        <td
                                            v-for="(e,j) in el"
                                            :class="{omitbg:(isYiLouTiaoChecked && (recordPoint[i][j] == '' || (recordPoint[i][j] != '' && recordPoint[i][j] < index)))}"
                                            width="30"
                                        >
                                            <span
                                                :class="{red:e.status,blue:(e.number_frequency==3 && isNumberTempChecked),orange:(e.number_frequency==2 && isNumberTempChecked)}"
                                                v-show="!e.omission"
                                                class="center-five-col-span"
                                            >{{e.number}}</span>
                                            <span
                                                :class="{omit:isOmitChecked}"
                                                class="center-five-col-span"
                                            >{{e.omission}}</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </td>
                        </tr>
                        <tr class="tbody-second-last-row">
                            <td class="tbody-tr-outer-td tbody-second-last-row-one-td">当前出现次数</td>
                            <td class="tbody-tr-outer-td"></td>
                            <td
                                class="tbody-tr-outer-td"
                                v-for="(el,i) in tbodySecondLastRowOtherTdData"
                            >
                                <tbody>
                                    <tr>
                                        <td v-for="e in el" width="30">
                                            <span>{{e}}</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </td>
                        </tr>
                        <tr class="tbody-last-row">
                            <td class="tbody-tr-outer-td tbody-last-row-one-td">当前最大遗漏</td>
                            <td class="tbody-tr-outer-td"></td>
                            <td class="tbody-tr-outer-td" v-for="(el,i) in tbodyLastRowOtherTdData">
                                <tbody>
                                    <tr>
                                        <td v-for="e in el" width="30">
                                            <span>{{e}}</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr class="tfoot-one-row">
                            <td rowspan="2" class="one-row-one-td">期号</td>
                            <td rowspan="2" class="one-row-tow-td">开奖号码</td>
                            <td class="two-row-outer-td" v-for="(item,index) in theadTwoRowData">
                                <tbody>
                                    <tr>
                                        <td v-for="(e,i) in item" width="30">
                                            <span>{{e}}</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </td>
                        </tr>
                        <tr class="tfoot-two-row">
                            <td v-for="(item,index) in theadOneRowOtherTdData">{{item}}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
import getChartPageInitData from "../../common/zstb/getChartPageInitData.js";
import cancelAllStyle from "../../common/zstb/cancelAllStyle.js";
import clickCheckboxFuc from "../../common/zstb/clickCheckBox.js";
import createZouShiFuc from "../../common/zstb/createZouShi.js";
import destroyZouShiDomFuc from "../../common/zstb/destroyZouShiDom.js"

export default {
  data() {
    return {
      zoushituDataVar: [
        //彩种走势图
        {
          title: "五星",
          status: 1,
          star: 5
        },
        {
          title: "四星",
          status: 0,
          star: 4
        },
        {
          title: "三星",
          status: 0,
          star: 3
        },
        {
          title: "二星",
          status: 0,
          star: 2
        }
      ],
      tabName: "五星", //走势分析前面的星数
      queryNum: 30,
      checkboxGroupVar: [
        {
          title: "辅助线",
          status: 1
        },
        {
          title: "遗漏",
          status: 1
        },
        {
          title: "遗漏条",
          status: 0
        },
        {
          title: "走势",
          status: 1
        },
        {
          title: "号温",
          status: 0
        }
      ], //多选框
      theadOneRowOtherTdData: [], //表头第一行的万位、千位等五列
      theadTwoRowData: [], //表头第二行的万位、千位等五列
      isChecked: false,
      tableTotalData: [], //表格总数据
      tbodyData: [], //tbody的内容
      tbodySecondLastRowOtherTdData: [], //当前出现次数
      tbodyLastRowOtherTdData: [], //当前最大遗漏
      isFuZhuXianChecked: true,
      isYiLouTiaoChecked: false,
      isOmitChecked: true,
      isNumberTempChecked: false,
      haoMaFenBuTdData: null,
      longHuHeTdData: null,
      isZouShiChecked: true,
      isZouShiLineCreated: false,
      zouShiLineClassArr: [
        ".wanwei .red",
        ".qianwei .red",
        ".baiwei .red",
        ".shiwei .red",
        ".gewei .red"
      ],
      recordPoint: new Object()
    };
  },

  mounted() {
    getChartPageInitData(this, this.$store.state.lotteryType, 5);
  },

  updated() {
    if (this.isZouShiChecked) {
      destroyZouShiDomFuc(this.zouShiLineClassArr);
      createZouShiFuc(this, this.zouShiLineClassArr);
    }
  },
  methods: {
    //切换彩种走势图tabs
    changeZouShiTuTabsFuc(index, content) {
      this.zoushituDataVar.forEach((el, i) => {
        if (index == i) {
          switch (i) {
            case 1:
              this.$refs.table.style.width = "1500px";
              break;
            case 2:
              this.$refs.table.style.width = "1200px";
              break;
            case 3:
              this.$refs.table.style.width = "900px";
              break;
            default:
              this.$refs.table.style.width = "1800px";
              break;
          }
          el.status = 1;
          this.tabName = el.title;
        } else {
          el.status = 0;
        }
      });
      cancelAllStyle(this, this.$store.state.lotteryType);
      getChartPageInitData(this, this.$store.state.lotteryType, content);
      this.isOmitChecked = true;
      this.isZouShiChecked = true;
    },

    //切换多选框（辅助线、遗漏等）
    clickCheckbox(index) {
      clickCheckboxFuc(this, index);
    },

    //点击查询
    llQueryData() {
      let stars;
      this.zoushituDataVar.forEach(el => {
        if (el.title == this.tabName) {
          stars = el.star;
        }
      });
      if (this.queryNum > 200) {
        this.queryNum = 200;
      } else if (this.queryNum <= 0) {
        this.queryNum = 1;
      }
      cancelAllStyle(this, this.$store.state.lotteryType);
      getChartPageInitData(this, this.$store.state.lotteryType, stars);
      this.isOmitChecked = true;
      this.isZouShiChecked = true;
    },

    //选中走势多选框执行
    // clickZouShiInputFuc(cName) {
    //   let eleDots = document.querySelectorAll(cName);
    //   fnLineChart(eleDots);
    // },

    //路由变化执行的函数
    // fetchData() {
    //   if (this.$route.params.caizhongID) {
    //     getChartPageInitData(this, this.$store.state.lotteryType, 5);
    //   }
    // },

    //判断追加的class类名
    getClassNameFuc(k, len) {
      let classNameArr = ["wanwei", "qianwei", "baiwei", "shiwei", "gewei"];
      let indexArr = [];
      for (let i = 5 - len; i < 5; i++) {
        indexArr.push(i);
      }
      return classNameArr[indexArr[k]];
    }
  }
  //   watch: {
  //     $route: "fetchData"
  //   }
};
</script>
<style lang='less' scoped>
@import url(../../assets/css/chartspage.less);
</style>